<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="text">
<ul>
</ul>
</body>
<script>
    let arr = ['ab','cd','er','gh','兄果然', '我城市', '我正游戏','新奇', '打打', '打热门'];
    let input = document.getElementsByTagName('input')[0];
    let ul = document.getElementsByTagName('ul')[0];
    let data = [];
    let num = 0;
    input.addEventListener('input', function (e) {
        console.log(1111);
        cs(e)
    })
    function cs(e) {
        if (e.target.value) {
            if (e.target.value.length < num) {
                data = [];
            }
            num = e.target.value.length;
            arr.forEach((v) => {
                if (v.length > 0) {
                    for (let i = 0; i < v.length; i ++) {
                        for (let  j = 0;  j < e.target.value.length; j ++) {
                            if (v[i] == e.target.value[j]) {
                                data.push('<li>' + v + '</li>');
                                data = [... new Set(data)];
                                for (let i = 0; i < data.length; i ++) {
                                    ul.innerHTML = data.join('')
                                }
                            }
                        }
                    }
                }
            });
        }else {
            ul.innerHTML = ''
        }

    }
</script>
</html>